<!-- src/views/Home.vue -->
<template>
  <div class="home-container">
    <!-- 头部 -->
    <Header style="margin-bottom: 30px;"/>

    <!-- 科室展示区 -->
    <main class="department-list">
      <el-skeleton :loading="loading" animated :count="3">
        <template #template>
          <el-skeleton-item variant="rect" class="skeleton-item"/>
        </template>

        <!-- 科室卡片 -->
        <el-row :gutter="20">
          <el-col
              v-for="department in departments"
              :key="department.departmentId"
              :xs="24" :sm="12" :md="8" :lg="6"
          >
            <el-card
                class="department-card"
                @click="goToDepartment(department.departmentId)"
            >
              <template #header>
                <div class="card-header">
                  <el-icon :size="26">
                    <OfficeBuilding/>
                  </el-icon>
                  <h3>{{ department.name }}</h3>
                </div>
              </template>

              <div class="card-content">
                <p class="description">{{ department.description || '暂无描述' }}</p>
                <div class="stats">
                  <el-tag type="info">
                    医生数量：{{ department.doctorVoList.length }}
                  </el-tag>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 空状态 -->
        <el-empty
            v-if="!loading && departments.length === 0"
            description="暂无科室数据"
        />
      </el-skeleton>
    </main>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
          v-model:current-page="pageData.page"
          :page-size="pageData.size"
          :total="pageData.total"
          layout="prev, pager, next"
          @current-change="changePageHandler"
      />
    </div>

  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
import {OfficeBuilding} from '@element-plus/icons-vue'
import {getDepartmentList} from "@/api/department.js";

const router = useRouter()
const departments = ref([])
const loading = ref(true)

// 分页相关
const pageData = ref({
  page: 1,
  size: 12
})

const changePageHandler = (page) => {
  pageData.value.page = page
  fetchDepartments()
}

// 获取科室数据（模拟API）
const fetchDepartments = async () => {
  try {
    // 实际开发中替换为真实API调用
    const res = await getDepartmentList(pageData.value)
    departments.value = res.data.records
    pageData.value.total = res.data.total
  } catch (error) {
    ElMessage.error('获取科室数据失败')
  } finally {
    loading.value = false
  }
}

// 跳转到科室详情
const goToDepartment = (departmentId) => {
  router.push({
    name: 'Department',
    params: {id: departmentId}
  })
}

onMounted(() => {
  fetchDepartments()
})
</script>

<style scoped>
.home-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.home-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.department-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-content {
  .description {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    height: 60px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .stats {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
  }
}

.skeleton-item {
  width: 100%;
  height: 180px;
  margin-bottom: 20px;
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}
</style>
